* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  width: 100%;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

#app {
  position: relative;
}

ul.stacks {
  position: absolute;
  display: flex;
  width: 100%;
}

li {
  flex: 1;
  height: 100vh;
  background-color: rgb(174, 174, 174);
  background: url("https://t.mwm.moe/ysz");
  background-size: auto 100%;
  overflow: hidden;
  transition: 1s transform ease-in-out;
}

ul.stacks li:nth-child(1) {
  background-position-x: calc(0 * -100%);
  transition-delay: calc(1 * 0.06s);
}
ul.stacks li:nth-child(2) {
  background-position-x: calc(1 * -100%);
  transition-delay: calc(2 * 0.06s);
}
ul.stacks li:nth-child(3) {
  background-position-x: calc(2 * -100%);
  transition-delay: calc(3 * 0.06s);
}
ul.stacks li:nth-child(4) {
  background-position-x: calc(3 * -100%);
  transition-delay: calc(4 * 0.06s);
}
ul.stacks li:nth-child(5) {
  background-position-x: calc(4 * -100%);
  transition-delay: calc(5 * 0.06s);
}
ul.stacks li:nth-child(6) {
  background-position-x: calc(5 * -100%);
  transition-delay: calc(6 * 0.06s);
}
ul.stacks li:nth-child(7) {
  background-position-x: calc(6 * -100%);
  transition-delay: calc(7 * 0.06s);
}
ul.stacks li:nth-child(8) {
  background-position-x: calc(7 * -100%);
  transition-delay: calc(8 * 0.06s);
}
ul.stacks li:nth-child(9) {
  background-position-x: calc(8 * -100%);
  transition-delay: calc(9 * 0.06s);
}
ul.stacks li:nth-child(10) {
  background-position-x: calc(9 * -100%);
  transition-delay: calc(10 * 0.06s);
}

ul.stacks:hover li {
  transform: translatey(-100vh);
}

.content {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}/*# sourceMappingURL=style.css.map */